<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Simple Family Photos - Plupload (JQuery UI) test page</title>
<!-- Load Queue widget CSS and jQuery -->
<link rel="stylesheet" href="../../css/jquery-ui-1.8.10.custom.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.plupload.css" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="../../js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="../js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../js/jquery.ui.plupload.min.js"></script>
<!--<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>-->

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
	$("#uploader").plupload({
		// General settings
		runtimes : 'html5,gears,silverlight,flash,browserplus,html4',
		url : 'http://cubist.cs.washington.edu/~dvhc/pictures/upload/1/1/',	// *** CHANGE THIS ***
		max_file_size : '20mb',
		chunk_size : '1mb',
		// unique_names : true,
		multiple_queues : true,

		// Resize images on clientside if we can
		resize : {width : 2048, height : 2048, quality : 100},
		
		// Rename files by clicking on their titles
		// rename: true,
		
		// Sort files
		sortable: true,

		// Specify what files to browse for
		filters : [
			{title : "Image files", extensions : "jpg,jpeg,jpe,tiff,tif,gif,png"}
		],

		// Flash settings
		flash_swf_url : '../js/plupload.flash.swf',

		// Silverlight settings
		silverlight_xap_url : '../js/plupload.silverlight.xap'
	});

	var uploader = $('#uploader').plupload('getUploader');

	// "UploadComplete" event never fires because plupload.js has a couple of fairly obvious bugs
	// (count isn't updated inside uploadNext() loop; and should be compared to files.length - 1);
	// so I worked around it.
	uploader.bind('StateChanged', function(upl) {
		// alert('State: ' + ((upl.state == plupload.STOPPED) ? 'Stopped' : 
		//					 ((upl.state == plupload.STARTED) ? 'Started' : 'Unknown')) );
		if (upl.state == plupload.STOPPED && upl.files.length > 0) {
			// alert('upl.total.uploaded == ' + upl.total.uploaded
	 		//		+ '\nupl.files.length == ' + upl.files.length);
	 		if (upl.total.uploaded == upl.files.length)
	 			// alert ('Ready to submit');
	 			;//$('form').submit();
		}
	});
});
</script>
</head>
<body>

<h1>Simple Family Photos Upload</h1>

<form  method="post" action="dump.php">
	<div id="uploader">
		<p>To upload photos please reload this page in a web browser with JavaScript enabled.</p>
	</div>
    
    <!--<p><p><input type="submit" />-->
</form>

</body>
</html>
